<template>
  <el-card
    class="comment-card"
    @click="enterComment"
  >
    <div class="card-header">
      <img
        :src="require('@/assets/img/avatar.png')"
        alt="thumbnail"
        class="card-thumbnail"
      />
      <span class="card-title">神秘人</span>
    </div>
    <p class="comment-details">{{item.content}}</p>
    <div class="comment-time">{{item.tim}}</div>
    <div class="card-footer">
      <div
        class="card-footer-container"
        @click.stop="toggleReplies(item)"
      >
        <p>{{ item.comments }}</p>
        <el-icon>
          <Comment />
        </el-icon>
      </div>
      <div
        class="card-footer-container"
        @click.stop="toggleLike(item)"
      >
        <p :style="{ color: item.liked ? 'red' : 'black'}">{{ item.lik }}</p>
        <el-icon :style="{ color: item.liked ? 'red' : 'black' }">
          <Star />
        </el-icon>
      </div>
    </div>
    <div
      v-if="isRepliesVisible"
      class="replies"
    >
      <el-card
        v-for="reply in replies"
        :key="reply.id"
        class="reply-item"
        style="margin-bottom: 20px;"
      >
        <div class="card-header">
          <img
            :src="require('@/assets/img/avatar.png')"
            alt="thumbnail"
            class="replycard-thumbnail"
          />
          <span class="replycard-title">神秘人</span>
        </div>
        <p class="reply-content">{{reply.content}}</p>
        <div class="reply-time">{{reply.tim}}</div>
      </el-card>
    </div>

    <el-button
      v-if="!isCommenting"
      style="width: 150px;height: 30px;font-size: 16px"
      color="#a8b4b08f"
      type="comment"
      @click="startCommenting"
    >发评论</el-button> <!-- 输入框和上传图片 -->
    <div
      v-if="isCommenting"
      class="comment-box"
    >
      <el-input
        type="textarea"
        v-model="commentText"
        placeholder="请输入评论内容"
        rows="6"
      />
      <div class="comment-actions">
        <el-button
          @click="saveComment"
          type="primary"
        >保存</el-button>
        <el-button
          @click="cancelComment"
          type="text"
        >取消</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
import { put, post, get } from "@/net";
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useAccountStore } from "@/store";
export default {
  name: 'commentcard',
  props: {
    item: {
      type: Object,
      required: true,
    },
  },

  setup () {
    const isCommenting = ref(false);
    const commentText = ref('');
    const store = useAccountStore();
    const isRepliesVisible = ref(false); // 控制回复展开状态
    const replies = ref([]); // 存储回复列表
    const toggleLike = (item) => {
      if (!item.liked) {
        item.lik += 1;
        item.liked = true; // 标记为已点赞
      } else {
        item.lik -= 1;
        item.liked = false; // 取消点赞
      }
      put('/comment_info/like', { cid: item.id, aid: store.account.id }, (message) => {
        console.log(message.msg);
      });
      post('/message_info/add_message', { receiver_id: item.id, sender_id: store.account.id, tex: "点赞了一条回复", message_type: 2 }, (message) => {
        console.log(message.msg);
      });
    };
    const toggleReplies = async (item) => {
      isRepliesVisible.value = !isRepliesVisible.value;
      if (isRepliesVisible.value) {
        // 获取回复列表
        get(
          "/comment_reply_info/get_reply", { cid: item.id },
          (message) => {
            console.log(message.data);
            replies.value = message.data.replies;
          },
        );
      }
    };

    const startCommenting = () => {
      isCommenting.value = true;
    };
    // 保存评论
    const saveComment = async (item) => {
      if (!commentText.value) {
        ElMessage.error('请填写评论内容');
        return;
      }

      const replyData = {
        cid: item.id,
        content: commentText.value,
        rid: store.account.id, // 评论者 ID
        // 可以将图片和其他数据一并上传
        // images: uploadedImages.value // 这里可以根据你的上传图片逻辑处理
      };

      // 调用 API 提交评论数据
      post(
        "/comment_reply_info/reply_comment",
        replyData,
        (message) => {
          ElMessage.success(message.msg);
          commentText.value = ''; // 清空评论内容
          isCommenting.value = false; // 隐藏评论框
        },
        (message) => {
          ElMessage.error(message.msg);
        }
      );
      post(
        "/message_info/add_message",
        {
          receiver_id: item.id,
          sender_id: store.account.id,
          tex: "收到一个新评论",
          message_type: 5
        },
        (message) => {
          console.log(message.msg);
        },
      );
    };
    // 取消评论
    const cancelComment = () => {
      isCommenting.value = false; // 隐藏评论框
      commentText.value = ''; // 清空输入框内容
    };
    return {
      toggleLike, isCommenting, commentText, saveComment, cancelComment, startCommenting, toggleReplies, isRepliesVisible, replies
    };
  }
};
</script>

<style scoped>
.comment-card {
  width: 100%;
  min-width: 100%;
  min-height: 150px;
  height: auto;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin: 10px 0;
  padding: 15px;
  box-shadow: var(--color-post-card-box-shadow) 0 3px 8px;
  transition: all 0.5s;
}
.comment-card:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.card-header {
  --userImage: 50px;
  width: 100%;
  height: 30px;
  margin-right: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 700;
}

.card-thumbnail {
  width: 30px;
  height: 30px;
  object-fit: cover;
  margin-right: 8px;
}

.card-title {
  font-size: 1.2em;
  font-weight: bold;
}

.comment-details {
  font-size: 18px;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

.comment-time {
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}

.card-footer-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 4px; /* 控制文字和图标之间的间距 */
  font-size: 18px; /* 设置整体字体大小 */
}

.card-footer-container p {
  font-size: inherit; /* 文字大小继承父容器 */
  color: #666; /* 可选，设置文字颜色 */
}

.card-footer-container el-icon {
  font-size: inherit; /* 图标大小继承父容器 */
  color: #666; /* 可选，设置图标颜色 */
}

.card-footer-container p {
  margin: 0; /* 去掉默认的段落外边距 */
}

.card-footer-container el-icon {
  transition: color 0.3s ease; /* 添加平滑过渡效果 */
}

.card-footer {
  display: flex;
  justify-content: space-around;
  /* margin-top: 10px; */
  margin: 0;
}

.replies {
  margin-top: 10px;
  padding: 10px;
  border-top: 1px solid #ddd;
}

.reply-item {
  margin-bottom: 8px;
  font-size: 16px;
}

.replycard-thumbnail {
  width: 20px;
  height: 20px;
  object-fit: cover;
  margin-right: 6px;
}

.replycard-title {
  font-size: 1em;
  font-weight: bold;
}

.reply-time {
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
}

.reply-content {
  font-size: 18px;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
</style>